<template>
    <p>{{ user.name }}</p>
    <button @click="change">修改user.name</button>
    <hr>

    <p>{{ count }}</p>
    <button @click="modify">修改count</button>

    <p>{{ user.age }}</p>
    <p>{{ ageRef }}</p>
    <button @click="ageRef++">修改ageRef</button>
    <button @click="user.age++">修改user.age</button>
    <hr>

    <p>{{ user.name }}</p>
    <p>{{ name }}</p>
    <button @click="name='jack'">修改name</button>
    <hr>

    <p>{{ doubleCount }}</p>
    <hr>

    <p>{{ score }}</p>
    <button @click="score=99">修改score</button>
</template>

<script setup>
    // 导入函数
    import { reactive, ref, toRef, toRefs, computed, watch } from 'vue'

    /**
     * reactive()用法
     */
    // 普通对象不具有响应式
    // const user = {
    //     name: 'tom',
    //     age: 18
    // }
    // 创建响应式数据对象，是一个代理对象
    const user = reactive({
        name: 'tom',
        age: 18
    })
    // console.log(user)
    const change = function (){
        // console.log(this) // undefined 无法访问this，也不需要访问this
        user.name = '汤姆'
        console.log(user.name)
    }


    /**
     * ref()用法
     */
    const count = ref(0) // 传入一个简单值，返回一个ref对象 {value:0}
    // console.log(count)

    const modify = function(){
        count.value = 6
    }

    
    /**
     * toRef()用法
     */
    const ageRef = toRef(user, 'age')


    /**
     * toRefs()用法
     */
    const userRef = toRefs(user)
    var {name,age} = userRef

    /**
     * computed()用法
     */
    const doubleCount = computed(() => {
        return count.value*2
    })

    /**
     * watch()用法
     */
    const score = ref(68)
    watch(score, (newValue, oldValue) => {
        console.log('score被修改了。。。。。。。', newValue)
    })

    watch(user, (newValue) => {
        console.log('user被修改了。。。', newValue)
    })

</script>

<style scoped>

</style>